<template>
  <div style="height: 100%; width: 100%; position: relative" ref="maindev">
      <div class="pagetop" :style="{ height: '103px' }">
          <table style="width: 100%; font-size: 12px" border="0">
              <col style="width: 4%" />
              <col style="width: 10%" />
              <col style="width: 4%" />
              <col style="width: 10%" />
              <col style="width: 5%" />
              <col style="width: 11%" />
              <col style="width: 11%" />
              <col style="width: 4%" />
              <col style="width: 11%" />
              <col style="width: 43%" />
              <tr>
                  <td align="right">登录名</td>
                  <td>
                      <el-select v-model="sel_loginname" placeholder="请选择" style="width: 100%" @change="RefreshTableData()" allow-create filterable default-first-option>
                          <el-option v-for="(item, index) in loginnameOption" :value="item.data" :label="item.display" :key="index"></el-option>
                      </el-select>
                  </td>
                  <td align="right">客户端名称</td>
                  <td>
                      <el-select v-model="sel_hostname" placeholder="请选择" style="width: 100%" @change="RefreshTableData()" allow-create filterable default-first-option>
                          <el-option v-for="(item, index) in hostnameOption" :value="item.data" :label="item.display" :key="index"></el-option>
                      </el-select>
                  </td>
                  <td align="right">应用程序</td>
                  <td>
                      <el-select v-model="sel_programname" placeholder="请选择" style="width: 100%" @change="RefreshTableData()" allow-create filterable default-first-option>
                          <el-option v-for="(item, index) in programOption" :value="item.data" :label="item.display" :key="index"></el-option>
                      </el-select>
                  </td>

                  <td colspan="2" align="center">
                      <el-checkbox v-model="sel_isthrid" true-label="1" false-label="0" @change="RefreshTableData()">仅显示第三方应用程序的连接</el-checkbox>
                  </td>

                  <td></td>
              </tr>
              <tr>
                  <td align="right">数据库</td>
                  <td>
                      <el-select v-model="sel_dbname" placeholder="请选择" style="width: 100%" @change="RefreshTableData()" allow-create filterable default-first-option>
                          <el-option v-for="(item, index) in dbnameOption" :value="item.data" :label="item.display" :key="index"></el-option>
                      </el-select>
                  </td>
                  <td align="right">客户端IP</td>
                  <td>
                      <el-select v-model="sel_clientip" placeholder="请选择" style="width: 100%" @change="RefreshTableData()" allow-create filterable default-first-option>
                          <el-option v-for="(item, index) in clientipOption" :value="item.data" :label="item.display" :key="index"></el-option>
                      </el-select>
                  </td>
                  <td colspan="3" align="center">
                      <el-checkbox v-model="sel_isDelete" true-label="1" false-label="0">当等待数超过</el-checkbox>
                      <el-input size="small" v-model="sel_waitcount" placeholder="默认" style="width: 50px"></el-input>个时自动结束掉头阻塞程序或等待时间超过 <el-input size="small" v-model="sel_waitsecond" placeholder="默认" style="width: 50px"></el-input>毫秒的连接
                  </td>
                  <td></td>
              </tr>
              <tr>
                  <td colspan="8" align="right" style="text-align: right; width: 100%">
                      <el-button icon="el-icon-delete" @click="BtnRefresh">刷新</el-button>
                      <!-- <el-button icon="el-icon-delete" @click="dealwaitdata">测试</el-button> -->
                  </td>
                  <td>
                      <el-checkbox v-model="sel_refresh" true-label="1" false-label="0" style="" @change="TimeRefreshData()">自动刷新，时间间隔(秒)</el-checkbox>
                      <el-input size="small" v-model="sel_second" placeholder="默认" style="width: 50px" @blur.native.capture="TimeRefreshData()"></el-input>
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter">
          <div class="middle_center">
              <el-tabs v-model="activeTabName" @tab-click="HandleClick" style="height: 100%" type="border-card" ref="tabs">
                  <el-tab-pane label="活动和监视器" name="rpt1stQuery">
                      <vxe-table :data.sync="rpt1stData" :loading="rptIstLoading" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow ref="rpt1stTable" resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }" header-align="center" :key="rpt1stkey" :setting="{ storage: true }" show-footer :footer-method="footerMethod" :row-class-name="dbRowName">
                          <vxe-table-column field="" title="杀" width="42" align="center" >
                              <template v-slot="{ row }">
                                  <vxe-button @click="DeleteRowEvent(row)">X</vxe-button>
                              </template>
                          </vxe-table-column>
                          <vxe-table-column field="session_id" title="会话ID" width="55" align="center" ></vxe-table-column>
                          <vxe-table-column field="login_name" title="登录名" width="200" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="dbname" title="数据库" width="100" header-align="center"></vxe-table-column>
                          <vxe-table-column field="status" title="状态" width="70"></vxe-table-column>
                          <vxe-table-column field="command" title="命令" width="100"></vxe-table-column>
                          <vxe-table-column field="program_name" title="应用程序" width="210"></vxe-table-column>
                          <vxe-table-column field="wait_time" title="等待时间" width="65"></vxe-table-column>
                          <vxe-table-column field="blocking_session_id" title="阻塞者" width="65"></vxe-table-column>
                          <vxe-table-column field="blockhead" title="头阻塞" width="65" align="center">
                              <template v-slot="{ row }">
                                  <el-checkbox v-model="row.ishead" true-label="1" false-label="0" :disabled="true"></el-checkbox>
                              </template>
                          </vxe-table-column>
                          <vxe-table-column field="sqltext" title="SQL语句" width="200"></vxe-table-column>
                          <vxe-table-column field="host_name" title="客户端电脑名" width="140"></vxe-table-column>
                          <vxe-table-column field="client_net_address" title="客户端IP" width="120"></vxe-table-column>
                          <vxe-table-column field="wait_type" title="等待类型" width="80"></vxe-table-column>
                          <vxe-table-column field="wait_resource" title="等待资源" width="80"></vxe-table-column>
                          <vxe-table-column field="memory_usage" title="内存使用" width="80"></vxe-table-column>
                          <vxe-table-column field="cpu_time" title="CPU时间" width="80"></vxe-table-column>
                          <vxe-table-column field="sqlhandle" title="SQL语句句柄" width="120"></vxe-table-column>
                          <vxe-table-column field="planhandle" title="执行计划句柄" width="120"></vxe-table-column>
                      </vxe-table>
                  </el-tab-pane>
                  <el-tab-pane label="禁止连接" name="rpt2ndQuery">
                      <vxe-table :data.sync="rpt2ndData" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow ref="rpt2ndTable" resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }" header-align="center" :key="rpt2ndkey"> </vxe-table>
                  </el-tab-pane>
              </el-tabs>
          </div>
      </div>
  </div>
</template>

<script>
import XEUtils from "xe-utils"; //引入工具类
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  name: "MNG193",
  data() {
      return {
          sel_loginname: "",
          sel_hostname: "",
          sel_programname: "",
          sel_dbname: "",
          sel_clientip: "",
          sel_isthrid: "0",
          sel_refresh: "0",
          sel_second: "3",
          activeTabName: "rpt1stQuery",
          rpt1stkey: 0,
          rpt2ndkey: 0,
          rpt1stData: [],
          rpt2ndData: [],
          rptIstLoading: false,
          rpt2ndLoading: false,
          loginnameOption: [],
          hostnameOption: [],
          programOption: [],
          dbnameOption: [],
          clientipOption: [],
          tableTempData: [],
          tableAllData: [],
          intervalId: null,
          sel_isDelete: "0",
          sel_waitcount: 15,
          sel_waitsecond: "8000",
          wait_count: 0,
          headdata: [],
          waitdate: [],
      };
  },
  created() {
      // this.LoginUser();
      // this.GetSavePower();
      // this.BtnClear();
  },
  mounted() {
      this.initData();
  },
  methods: {
      // 初始化获取数据
      initData() {
          try {
              this.rptIstLoading = true;
              this.$tool
                  .request({
                      url: "MNG/MNG1/MNG193",
                      method: "post",
                      data: {
                          action: "QueryData",
                      },
                  })
                  .then((res) => {
                      this.rpt1stData = res.data;
                      this.rptIstLoading = false;
                      this.loginnameOption = res.loginnameOption;
                      this.hostnameOption = res.hostnameOption;
                      this.programOption = res.programOption;
                      this.dbnameOption = res.dbnameOption;
                      this.clientipOption = res.clientipOption;
                      this.tableTempData = res.data;
                      this.tableAllData = res.data;
                      this.RefreshTableData();
                  })
                  .catch((e) => {
                      this.$alert(e, "error");
                      this.rptIstLoading = false;
                  });
          } catch (e) {
              this.$message.warning(e);
          }
      },
      //TAB点击事件
      HandleClick(tab) {
          if (tab.label == "初次查询") {
              this.rpt1stkey++;
          } else if (tab.label == "二次查询") {
              this.rpt2ndkey++;
          }
      },

      //刷新 按钮
      BtnRefresh() {
          this.initData();
      },
      //
      RefreshTableData() {
          var _loginname = this.sel_loginname;
          var _hostname = this.sel_hostname;
          var _programname = this.sel_programname;
          var _dbname = this.sel_dbname;
          var _clientip = this.sel_clientip;
          var _isthrid = this.sel_isthrid;
          if (_loginname == "" && _hostname == "" && _programname == "" && _dbname == "" && _clientip == "" && _isthrid == "0") {
              this.rpt1stData = this.tableAllData;
          } else {
              let filterFilter = {
                  login_name: _loginname,
                  host_name: _hostname,
                  program_name: _programname,
                  dbname: _dbname,
                  client_net_address: _clientip,
                  is_thrid: _isthrid,
              };
              // 拿到有值的参数
              let tempFilter = {};
              for (var key in filterFilter) {
                  if (filterFilter[key] != "") {
                      if (key == "is_thrid") {
                          if (filterFilter[key] == "1") {
                              tempFilter[key] = filterFilter[key];
                          }
                      } else {
                          tempFilter[key] = filterFilter[key];
                      }
                  }
              }

              this.rpt1stData = this.tableTempData.filter((item) => {
                  let flag = false;
                  for (var key in tempFilter) {
                      if (key == "is_thrid") {
                          if (item["program_name"].indexOf("cloudlis7.") < 0 && item["program_name"].indexOf("WebLis7.") < 0) {
                              flag = true;
                          } else {
                              flag = false;
                              break;
                          }
                      } else {
                          if (item[key] == tempFilter[key]) {
                              flag = true;
                          } else {
                              flag = false;
                              break;
                          }
                      }
                  }
                  if (flag) {
                      return item;
                  }
              });
          }
      },

      //
      TimeRefreshData() {
          if (this.sel_second == "") return;
          if (this.sel_refresh == "1" && this.sel_second != "") {
              var second = this.sel_second;
              var numRe = new RegExp(/^[0-9]*$/);
              if (!numRe.test(second)) {
                  this.$alert("请输入数字！");
                  this.sel_second = "";
                  this.sel_refresh = "0";
                  return;
              }

              var second = this.sel_second;
              // 计时器正在进行中，退出函数
              if (this.intervalId != null) {
                  return;
              }
              // 计时器为空，操作
              this.intervalId = setInterval(() => {
                  this.dealwaitdata();
                  this.initData();
              }, second * 1000);
          } else {
              this.destroyTime();
          }
      },

      destroyTime() {
          clearInterval(this.intervalId); //清除计时器
          this.intervalId = null; //设置为null
      },
      DeleteRowEvent(row) {
          this.$confirm("是否要结束连接：【" + row.session_id + "】？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          }).then(() => {
              this.deleteData(row);
          });
      },

      deleteData(row) {
          try {
              this.rptIstLoading = true;
              this.$tool
                  .request({
                      url: "MNG/MNG1/MNG193",
                      method: "post",
                      data: {
                          action: "DeleteData",
                          session_id: row.session_id,
                          //rowdata: row,
                      },
                  })
                  .then((res) => {
                      if (res.errcode == "1") {
                          // this.$alert("连接已断开！");
                          this.$message({
                              message: "连接已断开！",
                              type: "success",
                          });
                      } else {
                          this.$alert(res.errmsg);
                      }
                      this.initData();
                  })
                  .catch((e) => {
                      this.$alert(e, "error");
                      this.rptIstLoading = false;
                  });
          } catch (e) {
              this.$message.warning(e);
          }
      },

      footerMethod({ columns, data }) {
          // console.info("1111111111111");
          this.wait_count = 0;
          var dt = this.tableAllData;
          for (let index = 0; index < dt.length; index++) {
              if (dt[index].ishead == "1") {
                  if (typeof jsObj != "undefined") {
                      jsObj.Log("MNG193 头阻塞连接，主要信息内容为 ：" + dt[index]);
                  }
              }

              if (dt[index].wait_time > 0) {
                  if (typeof jsObj != "undefined") {
                      jsObj.Log("MNG193 等待时间不为0的连接，主要信息内容为 ：" + dt[index]);
                  }

                  this.wait_count++;
              }
          }
          //let data = this.rpt1stData;
          return [
              columns.map((column, columnIndex) => {
                  if (columnIndex === 7) {
                      return "等待：" + this.wait_count;
                  }
              }),
          ];
      },

      dealwaitdata() {
          var isdelete = this.sel_isDelete;
          if (isdelete == "1") {
              var numRe = new RegExp(/^[0-9]*$/);
              var num = this.sel_waitcount;
              if (num == "" || !numRe.test(num)) {
                  this.$alert(" 请输入数字！");
                  this.sel_waitcount = "";
                  this.sel_isDelete = "0";
                  return;
              }
              var waittime = this.sel_waitsecond;
              if (waittime == "" || !numRe.test(waittime)) {
                  this.$alert(" 请输入数字！");
                  this.sel_waitsecond = "";
                  this.sel_isDelete = "0";
                  return;
              }
              // 筛选数据，处理数据
              this.headdata = this.tableAllData.filter((item) => {
                  if (item.ishead == "1") return item;
              });

              this.waitdate = this.tableAllData.filter((item) => {
                  if (item.wait_time > waittime) return item;
              });

              if (this.wait_count > num) {
                  if (this.headdata.length > 0) {
                      let data = this.headdata[0];
                      this.dealData(data);
                  } else if (this.waitdate.length > 0) {
                      let wdata = this.waitdate[0];
                      this.dealData(wdata);
                  }
              }
          }
          return;
      },

      dealData(row) {
          try {
              this.rptIstLoading = true;
              this.$tool
                  .request({
                      url: "MNG/MNG1/MNG193",
                      method: "post",
                      data: {
                          action: "DeleteData",
                          session_id: row.session_id,
                          //rowdata: row,
                      },
                  })
                  .then((res) => {
                      if (res.errcode == "1") {
                          if (typeof jsObj != "undefined") {
                              jsObj.Log("MNG193 数据库连接断开，主要信息为: " + row);
                          }

                          //this.$alert("连接已断开！");
                      } else {
                          this.$alert(res.errmsg);
                      }
                      //this.initData();
                  })
                  .catch((e) => {
                      this.$alert(e, "error");
                      this.rptIstLoading = false;
                  });
          } catch (e) {
              this.$message.warning(e);
          }
      },

      dbRowName({ row, rowIndex }) {
              if (row.ishead == "1") {
                  return "colred";
              }
          },

      },
};
</script>

<style scoped>
::v-deep .el-checkbox__inner::after {
  border: 2px solid #000000 !important;
  box-sizing: content-box;
  content: "";
  border-left: 0 !important;
  border-top: 0 !important;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}
::v-deep .vxe-table--header .vxe-header--column {
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #ccc;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #000000;
  cursor: not-allowed;
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner + .el-input.is-disabled .el-input__inner {
  background-color: #ffffff !important;
}
.pagetop {
  left: 0;
  right: 0;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  white-space: nowrap;
}
.pagecenter {
  position: absolute;
  top: 107px;
  bottom: 0px;
  overflow: auto;
  width: 100%;
  left: 0px;
}
.middle_center {
  position: absolute;
  height: 100%;
  right: 0px;
  left: 0px;
  overflow: auto;
}
.middle-right {
  position: absolute;
  top: 0;
  bottom: 0px;
  overflow: visible;
  width: 570px;
  right: 0px;
}
table tr td:nth-child(odd) {
  /* text-align: right; */
  white-space: nowrap;
}
table tr td:nth-child(even) {
  text-align: left;
}
table tr td:nth-child(1) {
  width: 80px;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
.middle-center {
  height: 250px;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 0;
}
::v-deep .el-textarea__inner {
  padding: 0px 5px;
}
::v-deep .colred {
  background-color: red !important;
}
</style>
